<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div ref="ele">
        <!-- 搜索 -->
        <label class="el-form-item-label">姓名</label>
        <el-input v-model="query.name" clearable placeholder="输入姓名" style="width: 160px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">账号</label>
        <el-input v-model="query.username" clearable placeholder="输入账号" style="width: 160px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <!--<label class="el-form-item-label">用户类型</label>
        <el-select v-model="query.userType" placeholder="全部" @change="crud.toQuery" clearable style="width: 125px;" class="filter-item">
          <el-option
              v-for="item in userTypes"
              :key="item.value"
              :label="item.key"
              :value="item.value">
          </el-option>
        </el-select>-->
        <label class="el-form-item-label">交易时间</label>
        <date-range-picker v-model="query.createTime" clearable style="width: 265px;" size="mini" class="date-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">交易类型</label>
        <el-select v-model="query.billType" clearable placeholder="全部" style="width: 135px;" class="filter-item" @keyup.enter.native="crud.toQuery">
          <el-option
            v-for="item in billTypes"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
        <label class="el-form-item-label">收支类型</label>
        <el-select v-model="query.paymentType" clearable placeholder="全部" style="width: 135px;" class="filter-item" @keyup.enter.native="crud.toQuery">
          <el-option
            v-for="item in paymentTypes"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
      <crudOperation :permission="permission" />
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :height="tableHeight"
      border
      :data="crud.data"
      style="width: 100%;"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column prop="username" align="center" label="用户账号" show-overflow-tooltip />
      <el-table-column prop="name" align="center" label="用户姓名" show-overflow-tooltip />
      <el-table-column prop="billType" width="100" align="center" label="交易类型" show-overflow-tooltip>
        <template slot-scope="scope">

          <el-tag
            :type="scope.row.billType === 6 ? 'primary'
              : scope.row.billType === 5 ? 'success'
                : scope.row.billType === 4 ? 'info'
                  : scope.row.billType === 3 ? 'danger'
                    : scope.row.billType === 1 ? 'warning'
                      : ''"
          >
            {{
              scope.row.billType === 1 ? "订单支付"
              : scope.row.billType === 2 ? "货运结算"
                : scope.row.billType === 3 ? "煤款收入"
                  : scope.row.billType === 4 ? "运费收入"
                    : scope.row.billType === 5 ? "充值"
                      : scope.row.billType === 6 ? "提现"
                        : scope.row.billType === 7 ? "退款" : "其他"
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="amount" align="center" label="交易金额（元）" width="140" show-overflow-tooltip>
        <template slot-scope="scope" align="center">
          <span class="search-text1">{{ scope.row.paymentType === 2 ? '-' + scope.row.amount : scope.row.amount | nullFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="paymentType" align="center" label="类型" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag :type="scope.row.paymentType === 1 ? 'warning' : 'success'">
            {{
              scope.row.paymentType === 1 ? "收入"
              : scope.row.paymentType === 2 ? "支出"
                : "-"
            }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="billNo" align="center" label="流水号" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.billNo | nullFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="remark" align="center" label="备注" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.remark | nullFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" align="center" label="交易时间" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="详情" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.billType === 4 || scope.row.billType === 2"
            size="mini"
            type="primary"
            @click="createBtnClick(scope.row)"
          >查看订单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
    <div class="panel">
      <form-panel v-if="showFormPanel" :show-form-panel.sync="showFormPanel" :item="selectedItem" @refreshList="crud.toQuery" />
    </div>
  </div>
</template>

<script>
import CRUD, { presenter, header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker/index'
import Form from './form'
export default {
  name: 'Bill',
  components: { pagination, crudOperation, rrOperation, DateRangePicker, 'form-panel': Form },
  mixins: [presenter(), header(), crud()],
  cruds() {
    return CRUD({ title: '订单列表', url: 'api/bill', query: {}, idField: 'incomeRecordId', sort: 'payTime,desc' })
  },
  data() {
    return {
      showFormPanel: false,
      selectedItem: {},
      height: this.getTableHeight({}),
      tableHeight: this.height,
      accountMoney: { blanace: 0 },
      paymentTypes: [
        { id: 1, name: '收入' },
        { id: 2, name: '支出' }
      ],
      status: [
        { key: '全部', value: null },
        { key: '进行中', value: 1 },
        { key: '已完成', value: 2 }
      ],
      userTypes: [
        { key: '全部', value: null },
        { key: '司机', value: 1 },
        { key: '车主', value: 2 },
        { key: '运输公司', value: 3 },
        { key: '经销商', value: 4 },
        { key: '用户', value: 0 }
      ],
      billTypes: [
        { key: '全部', value: null },
        { key: '订单支付', value: 1 },
        { key: '货运结算', value: 2 },
        { key: '煤款收入', value: 3 },
        { key: '运费收入', value: 4 },
        { key: '充值', value: 5 },
        { key: '提现', value: 6 },
        { key: '退款', value: 7 },
        { key: '其他', value: 8 }
      ],
      permission: {
        add: ['admin', 'driverBusiness:add'],
        edit: ['admin', 'driverBusiness:edit'],
        del: ['admin', 'driverBusiness:del']
      }
    }
  },

  created() {
    this.crud.optShow = {
      reset: true,
      add: false,
      edit: false,
      del: false,
      download: true
    }
  },
  mounted: function() {
    this.tableHeight = this.height - this.$refs.ele.clientHeight - 15
  },
  methods: {
    createBtnClick(value) {
      this.selectedItem = value
      this.showFormPanel = true
    },
    getCommSummaries({ column, customer, title = '合计', titleIndex }) {
      this.$nextTick(() => {
        this.$refs['table'].doLayout()
      })
      return function(param) {
        const sums = []
        const { columns, data } = param
        columns.forEach((columnItem, index) => {
          if ((titleIndex === undefined && columnItem.type === 'index') || index === titleIndex) {
            sums[index] = title
          } else if (customer) {
            sums[index] = customer[columnItem.property] === null || customer[columnItem.property] === undefined || customer[columnItem.property] === '' ? '-' : customer[columnItem.property]
          } else {
            const sumList = []
            column.forEach((e) => {
              if (e.toString().includes('-')) {
                for (let i = Number(e.split('-')[0]); i <= Number(e.split('-')[1]); i++) {
                  sumList.push(i)
                }
              } else {
                sumList.push(Number(e))
              }
            })
            if (sumList.includes(index)) {
              const values = data.map(e => Number(e[columnItem.property]))
              if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr)
                  if (!isNaN(value)) {
                    return prev + curr
                  } else {
                    return prev
                  }
                }, 0)
                sums[index] += ''
              } else {
                sums[index] = '-'
              }
            }
          }
        })
        return sums
      }
    },
    closeDialog(formName) {
      this.$refs[formName].resetFields()
    },
    objectKey(key, value) {
      const keyValue = {}
      keyValue[key] = value
      return key
    },
    search() {
      const self = this
      self.$http.get('/api/account/findAccount').then(function(value) {
        if (value.ok) {
          self.accountMoney = value.data
        }
      })
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  .card-panel {
    .icon-money {
      color: #FB7814;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 10px 0 0 10px;
      padding: 10px;
      transition: all 0.18s ease-out;
      border-radius: 3px;
    }

    .card-panel-icon {
      float: left;
      font-size: 30px;
    }

    .card-panel-description {
      float: left;
      font-weight: bold;
      margin: 33px;
      margin-left: 0;

      .card-panel-text {
        line-height: 0;
        color: #606266;
        font-size: 14px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
</style>
